%!TeX root=book.tex
\chapter{Ανάλυση του συστήματος}
	\section{Εισαγωγή}
	Η πτυχιακή μας εργασία αποτελεί μια διαδικτυακή εφαρμογή στα πλαίσια της οποίας στόχος είναι να προβληθεί ένα φροντιστήριο μέσης εκπαίδευσης στο διαδίκτυο, να μπορέσει να διαχειριστεί τα μελή του ηλεκτρονικά όπως επίσης και να δώσει την δυνατότητα για την δημιουργία περισσότερων διαδραστικών τρόπων διδασκαλίας οι όποιοι διαδίδονται ολοένα και περισσότερο στην εποχή της διαδικτυακής (online) εκπαίδευσης.
	
	Εκτός από τις πολλές δυνατότητες που θέλει να προσφέρει σε μαθητές και γονείς κύριος στόχος της εφαρμογής επίσης είναι να μπορέσει να δώσει την δυνατότητα σε διαχειριστές διαδικτυακών σελίδων (website administrators) που δεν έχουν ιδιαίτερες γνώσεις στον τομέα της διαδικτυακής ανάπτυξης εφαρμογών (web development) να μπορέσουν να διαχειριστούν και να προβάλουν σε ικανοποιητικό βαθμό τις σελίδες τους χωρίς να χρειάζονται ιδιαίτερο κόπο και χρόνο.
	
	\section{Απαιτήσεις}
	Κύριος στόχος της εφαρμογής είναι η υλοποίηση λειτουργιών σε ένα ηλεκτρονικό φροντιστήριο σύμφωνα με τις ανάγκες τις εποχής μας έχοντας πάντα στο μυαλό μας πως ο χρήστης που πρόκειται να το διαχειριστεί δεν θα πρέπει να έχει ιδιαίτερες γνώσεις πάνω στην διαδικτυακή ανάπτυξη σελίδων.
	
	Έχοντας ως κύριο γνώμονα το παραπάνω καταλήξαμε στις παρακάτω λειτουργίες - απαιτήσεις της εφαρμογής μας:
	\begin{itemize}
		\item Δημιουργία διαδικτυακού τόπου όπου η εμφάνιση του θα χαρακτηρίζεται από απλότητα και ευκρίνεια αλλά παράλληλα θα συμβαδίζει και με τα σύγχρονα πρότυπα σχεδίασης του Web 2.0.
		\item Δημιουργία τεσσάρων (4) επίπεδων διαχείρισης της εφαρμογής μας οπού η καθεμία θα διέπεται από διαφορετικά χαρακτηριστικά και λειτουργίες: Διαχειριστής - Καθηγητής - Εγγεγραμμένος Χρήστης - Επισκέπτης (Administrator - Teacher - User - Visitor).
		\item Δημιουργία ειδικού διαχειριστικού χώρου (administrator panel) οπού ο διαχειριστής του συστήματος θα είναι σε θέση να μπορεί να αλλάζει ζωντανά (live) οτιδήποτε υπάρχει μέσα στην σελίδα χωρίς ιδιαίτερο κόπο ή γνώσεις.
		\item Προσθήκη διαφόρων μέσων κοινωνικής δικτύωσης (social media) στην εφαρμογή με δυνατότητα διαχείρισης τους.
	\end{itemize}


	Προσθήκη διαφόρων συνηθισμένων και συνάμα αναγκαίων λειτουργιών σε μία διαδικτυακή εφαρμογή όπως: 
	\begin{enumerate}
		\item Σύνδεση χρηστών στην εφαρμογή.
		\item Δυνατότητα αναζήτησης στα άρθρα της εφαρμογής.
		\item Επικοινωνία με τους διαχειριστές του ιστότοπου.
	\end{enumerate}	


	\section{Βασικά μέρη}
		Η διαδικτυακή μας εφαρμογή αποτελείται απο τις εξής κομβικές περιοχές: 
		\begin{itemize}
			\item Το εμφανισιακό μέρος της εφαρμογής μας (Frontend) είναι η περιοχή της εφαρμογής που μπορεί να δει οποιοσδήποτε την χρησιμοποιεί. Προσφέρει διάφορες πληροφορίες  αλλά αξιοσημείωτες είναι οι διαφοροποιήσεις που υπάρχουν ανάλογα με τον ρόλο του χρήστη που την χρησιμοποιεί (χρήστης - επισκέπτης - διαχειριστής).
			\item Το προγραμματιστικό ή λειτουργικό κομμάτι (Backend), είναι το σημείο της εφαρμογής όπου εκτελούνται όλες οι λειτουργίες της.
			\item Ιδιαίτερη μέριμνα πρέπει να δοθεί στο περιβάλλον διαχείρισης όπου ο διαχειριστής μπορεί να αλλάξει δυναμικά οποιαδήποτε πληροφορία της εφαρμογής μας όπως επίσης και να κάνει αλλαγές σε διάφορα άλλα σημεία της με πολύ εύκολο τρόπο και χωρίς να κατέχει ιδιαίτερες γνώσεις στον τομέα του προγραμματισμού.
			\item Η αρχική σελίδα του ιστότοπου που είναι το πρώτο πράγμα που βλέπει ο χρήστης όταν εισέρχεται στο σύστημα.
		\end{itemize}

		\subsection{Τεχνολογίες που χρησιμοποιήθηκαν}
		\begin{table}[h]
		\centering
    \begin{tabular}{ | l | l | l | p{5cm} |}
    \hline
    Όνομα & Έκδοση & Είδος & Ανοιχτού Κώδικα \\ \hline
    PHP & 5.3+ & Γλώσσα & Ναι \\ \hline
    MySQL & 5+ & Εφαρμογή & Ναι \\ \hline
    SQL & SQL:2003+ & Γλώσσα & Ναι \\ \hline
    CodeIgniter & 2.2.0 & Framework & Ναι \\ \hline
    DataMapper & 1.8.2.1 & Βιβλιοθήκη & Ναι \\ \hline
    HTML & 5 & Γλώσσα & Ναι   \\ \hline
    CSS & 3 & Γλώσσα & Ναι \\ \hline
    JavaScript & 1.8.6 & Γλώσσα & Ναι \\\hline
    Bootstrap & 3.2.0 & Βιβλιοθήκη & Ναι \\ \hline
    jQuery & 1.8.3 & Βιβλιοθήκη & Ναι \\ \hline
    reCaptcha API & 1.11 & Διεπαφή & - \\ \hline
    \end{tabular}
    \caption{Τεχνολογίες που χρησιμοποιήθηκαν}
	\label{tab:myTable}
	\end{table}

		\subsection{Εργαλεία που χρησιμοποιήθηκαν}
				\begin{table}[h]
		\centering
    \begin{tabular}{ | l | l | p{5cm} |}
    \hline
    Όνομα & Έκδοση & Ανοιχτού Κώδικα \\ \hline
    MySQL & 5+ & Ναι \\ \hline
    NetBeans IDE & 8.0.1 & Ναι \\ \hline
    XAMPP & 1.8.3 & Ναι \\ \hline
    phpMyAdmin & 4.2.9 & Ναι \\ \hline
    \end{tabular}
    \caption{Εργαλεία που χρησιμοποιήθηκαν}
	\label{tab:myTable}
	\end{table}
			\subsubsection{NetBeans IDE} Το NetBeans είναι ένα σύστημα επεξεργασίας και ανάπτυξης πηγαίου κώδικα. Πρόκειται για ελεύθερο λογισμικό, ελαφρύ, γραμμένο μεταξύ άλλων και για το περιβάλλον των Microsoft Windows.

			\subsubsection{XAMPP}
			Αποτελεί ένα πακέτο προγραμμάτων ελεύθερου λογισμικού, λογισμικού ανοικτού κώδικα, ανεξάρτητο πλατφόρμας το οποίο περιέχει τον εξυπηρετητή ιστοσελίδων HTTP Apache, την βάση δεδομένων MySQL και έναν διερμηνέα για κώδικα γραμμένο σε γλώσσες προγραμματισμού PHP και PERL. Προορίζεται κυρίως για να αναπτύξουμε και να δοκιμάσουμε την εφαρμογή μας τοπικά στον υπολογιστή μας.


		\subsection{Γενικά Χαρακτηριστικά}

		\subsection{Σχήμα της βάσης δεδομένων}
			\begin{center}
			  \includegraphics{images/diagram2_resized.PNG}
			  \captionof{figure}{Database Schema 1}
			  \label{fig:dbImage1}
			\end{center}		
		
			\begin{center}
			  \includegraphics{images/diagram1_resized.PNG}
			  \captionof{figure}{Database Schema 2}
			  \label{fig:dbImage2}
			\end{center}

		\subsection{Δομή της Εφαρμογής}
		Η εφαρμογή είναι βασισμένη στις σχεδιαστικές αρχές του Framework CodeIgniter και ως αποτέλεσμα χρησιμοποιεί την αρχιτεκτονική σχεδίασης MVC, έτσι ο κώδικας είναι χωρισμένος σε φακέλους που ανταποκρίνονται στα 3 βασικά κομμάτια, αυτά του Model του View και του Controller. Επίσης έγινε η χρήση του DataMapper ORM για την επικοινωνία με το persistence layer της βάσης δεδομένων MySQL, επομένως στο Model χρησιμοποιείται κυρίως αυτό ως ένα επιπρόσθετο κομμάτι για την μετατροπή των σχεσιακών οντοτήτων σε αντικείμενα κλάσεων.
		
			\subsubsection{Model}
			Η λογική του Model βρίσκεται στον φάκελο application/models όπου το κάθε ένα ξεχωριστό αρχείο περιγράφει τον τρόπο σύνδεσης με την αντίστοιχη οντότητα/πίνακα της βάσης δεδομένων και περιέχει τις όποιες απαραίτητες ενέργειες και λειτουργίες χρειάζονται να εφαρμοστούν πριν τα αποθηκευμένα δεδομένα περάσουν στο επόμενο επίπεδο της εφαρμογής, αυτό του Controller.
			
			Ένα αντιπροσωπευτικό παράδειγμα είναι το παρακάτω όπου η κλάση \textit{Article} περιγράφει τον τρόπο σύνδεσης με τον πίνακα της βάσης δεδομένων \textit{articles}:
			\begin{lstlisting}[caption=Class Article - Model, style=php]
<?php
class Article extends DataMapper {

	// Related models that Template can have just one of.
	var $has_one = array('user', 
			'category' => array('join_table' => 'articles_categories'),
			'user' => array('join_table', 'articles_users')
	);

	// Related models that Template can have more than one of.
	var $has_many = array(
				'course' => array('join_table' => 'courses_articles'),
				'attachment' => array('join_table' => 'articles_attachments')
	);
		
	var $validation = array(
		array(
			'field' => 'title',
			'label' => 'Title',
			'rules' => array('required', 'trim', 'unique', 'min_length' => 5, 'max_length' => 50)
		),
		array(
			'field' => 'content',
			'label' => 'Content',
			'rules' => array('required', 'trim', 'min_length' => 50)
		)
	);
}
?>
			\end{lstlisting}
		
			\subsubsection{Controller}
			Το σημαντικότερο κομμάτι της επικοινωνίας το παίζει το επίπεδο του Controller, μέσω του οποίου γίνεται η αμφίδρομη επικοινωνία δεδομένων μεταξύ του Model και του View. Σε αυτό το επίπεδο υπάρχει όλη η λογική που επιτρέπει στην εφαρμογή να ανακτά τα δεδομένα που ζητούνται εφαρμόζοντας όλες τις απαραίτητες τροποποιήσεις, τους ελέγχους και τις μεθόδους που απαιτούνται για να έρθουν τα δεδομένα στην απαραίτητη μορφή είτε για εισαγωγή προς τη βάση δεδομένων, είτε για ανάκτηση και παροχή τους προς το κάθε μέρος που τα ζήτησε, συνήθως το View.
			
			Σε συνέχεια του προηγούμενου παραδείγματος παρακάτω φαίνεται ο τρόπος με τον οποίο ο Controller 'Articles' που είναι υπεύθυνος για τα άρθρα επικοινωνεί με το Model για να πραγματοποιήσει τις απαραίτητες CRUD μεθόδους.
		
			\begin{lstlisting}[caption=Class Articles - Controller, style=php]
<?php
class Articles extends MY_Controller {

	function __construct() {
		parent::__construct();
	}

	public function index() {
	}

	public function get($id = NULL) {
		$article = new Article();
		$article->where('id', $id)->include_related('category')->include_related('user')->get();
		$data['template'] = 'article';
		if ($article->exists()) {
			$data['article'] = $article;
			$this->load->view('template', $data);
		} else {
			redirect('errors/notFound');
		}
	}
	
	public function create() {
		$article = new Article();
		if ($this->input->post('title')) {
			$article->title = $this->input->post('title');
		}
		if ($this->input->post('content')) { 
			$article->content = $this->input->post('content');
		}
		if ($article->save()) {
			echo 'success';
		} else {
			foreach ($article->error->all as $e) {
				echo $e . "<br />";
			}
		}

	}
	
	public function update($id = NULL) {
		$article = new Article();
		$article->where('id', $id)->get();
		if ($article->exists()) {
			if (isset($_GET['title']) && ($_GET['title'] != '')) { 
				$article->title = $_GET['title'];
			}
			if (isset($_GET['content']) && ($_GET['content'] != '')) { 
				$article->content = $_GET['content'];
			}
			$article->save();
		} else {
			echo 'Article does not exist';
		}
	}

	public function delete($id = NULL) {
		$article = new Article();
		$article->where('id', $id)->get();
		if ($article->exists()) {
			$article->delete();
		} else {
			echo 'Article does not exist';
		}
	}
	
}
?>
			\end{lstlisting}
		
			Όλοι οι Controllers βρίσκονται στον φάκελο application/controllers/ και το κάθε ένα αρχείο έχει το ίδιο όνομα με αυτό της κλάσης του, που δεν είναι απαραίτητο να ανταποκρίνεται μόνο σε αντίστοιχο όνομα ενός πίνακα της βάσης δεδομένων αλλά μπορεί να είναι κάτι πιο γενικό που ίσως κάνει κάποια άλλη λειτουργία και έχει πιο αντιπορσωπευτικό όνομα, όπως για παράδειγμα \textit{Login} ή \textit{Auth}

			\subsubsection{View}
			Το κομμάτι που είναι υπεύθυνο για την εμφάνιση των αποτελεσμάτων στην έξοδο (οθόνη) είναι αυτό του View και όλα τα σχετικά αρχεία βρίσκονται στον φάκελο /application/view/ όπου η ονοματολογία είναι ελεύθερη και δεν έχει κάποιον περιορισμό. 
			
			Για να επιτευχθεί ένα αποτέλεσμα αρχείων και κώδικα που θα είναι επαναχρησιμοποιήσιμα δημιουργήθηκε μια βασική δομή από αρχεία που περιέχει ως περίγραμμα ένα περιεχόμενο που είναι περισσότερο "στατικό" - ως προς την πληροφορία που περιέχει - και μέσα σε αυτήν προβάλλεται κάθε φορά η δυναμική πληροφορία η οποία είναι διαχωρισμένη σε διαφορετικά αρχεία ανάλογα με το πώς πρέπει να απεικονιστεί κάθε φορά.
			
			Όλη η διαδικασία γίνεται σε ένα κυρίως αρχείο 'application/views/template.php' στο οποίο καθορίζεται το μεγαλύτερο μέρος των HTML και CSS για την εμφάνιση των δεδομένων στον browser του χρήστη. 
			
			Αρχικά υπάρχει το κομμάτι HTML που ορίζει την απαραίτητη ενότητα \textit{head} και εκτός απο τις στατικές πληροφορίες που διαθέτει, όπως τα απαραίτητα αρχεία CSS και τους ορισμούς των \textit{meta} δεδομένων, έχει και κάποια τμήματα πληροφορίας όπως το tag \textit{title} που αλλάζει δυναμικά ανάλογα με την σελίδα που προβάλλεται κάθε φορά απο τον χρήστη.
			
			\begin{lstlisting}[caption=Template: head part - View, style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">    
	<link rel="shortcut icon" href="favicon.ico">
	<title><?php echo $this->settings->site_name ?><?php echo isset($title) ? ' - ' . $title : '' ?></title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
	
	<!-- Global CSS -->
	<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.css">   
	<!-- Plugins CSS -->    
	<link rel="stylesheet" href="<?php echo base_url();?>assets/plugins/font-awesome/css/font-awesome.css">
	<link rel="stylesheet" href="<?php echo base_url();?>assets/plugins/flexslider/flexslider.css">
	<link rel="stylesheet" href="<?php echo base_url();?>assets/plugins/pretty-photo/css/prettyPhoto.css">    
	<!-- Theme CSS -->  
	<link id="theme-style" rel="stylesheet" href="<?php echo base_url();?>assets/css/styles.css">
	
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>			
			\end{lstlisting}
			
			Στη συνέχεια υπάρχει το κομμάτι HTML που ορίζει την γενική εμφάνιση της οθόνης που σχεδόν πάντα παραμένει η ίδια. Σε αυτήν περιλαμβάνεται το λογότυπο, το κυρίως μενού, η μπάρα αναζήτησης και όποια άλλα στοιχεία όπως τα social media links παραμένουν σταθερά σε όλες τις οθόνες ανεξαρτήτου περιεχομένου.
			
			Επίσης σε περίπτωση που υπάρχει ένα μήνυμα προς τον χρήστη, εμφανίζεται σε ειδική περιοχή με χρήση της συνάρτησης \textit{flashdata} του αντικειμένου \textit{session}
			
			\begin{lstlisting}[caption=Template: Body part - Flash Message, style=htmlcssjs]
<body class="home-page">
	<!-- Part 1: Wrap all page content here -->
		<?php if($this->session->flashdata('flashMessage')):?>
			<div class="alert alert-<?php echo $this->session->flashdata('flashMessageType')?> alert-dismissible" role="alert">
				<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<?php echo $this->session->flashdata('flashMessage')?> 
			</div>
		<?php endif ?>
		\end{lstlisting}
		
		Το σημείο όπου εμφανίζονται δυναμικά οι σύνδεσμοι προς τα μέσα κοινωνικής δικτύωσης όπως έχουν οριστεί από τον διαχειριστή:
		
		\begin{lstlisting}[caption=Template: Body part - Social Media, style=htmlcssjs]
	<div class="wrapper">
	<!-- ******HEADER****** --> 
		<header class="header">  
			<div class="top-bar">
				<div class="container">              
					<ul class="social-icons col-md-6 col-sm-6 col-xs-12 hidden-xs">
						<?php if ($this->settings->twitter_link) { ?>
						  <li><a href="<?php echo $this->settings->twitter_link ?>" target="blank"><i class="fa fa-twitter"></i></a></li> 
						<?php }?>
						<?php if ($this->settings->facebook_link) { ?>
						  <li><a href="<?php echo $this->settings->facebook_link ?>"  target="blank"><i class="fa fa-facebook"></i></a></li> 
						<?php }?>
						<?php if ($this->settings->youtube_link) { ?>
						  <li><a href="<?php echo $this->settings->youtube_link ?>"  target="blank"><i class="fa fa-youtube"></i></a></li> 
						<?php }?>
						<?php if ($this->settings->linkedin_link) { ?>
						  <li><a href="<?php echo $this->settings->linkedin_link ?>"  target="blank"><i class="fa fa-linkedin"></i></a></li> 
						<?php }?>
						<?php if ($this->settings->google_link) { ?>
						  <li><a href="<?php echo $this->settings->google_link ?>"  target="blank"><i class="fa fa-google-plus"></i></a></li> 
						<?php }?>        
						<li class="row-end"><a href="#"  target="blank"><i class="fa fa-rss"></i></a></li>             
					</ul><!--//social-icons-->
		\end{lstlisting}
		
		Η ειδική φόρμα αναζήτησης στο περιεχόμενο του ιστότοπου:
		
		\begin{lstlisting}[caption=Template: Body part - Search, style=htmlcssjs]
					<form class="pull-right search-form" role="search">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="<?php echo lang('search'); ?>...">
						</div>
						<button type="submit" class="btn btn-theme">Go</button>
					</form>  
				</div>   
		\end{lstlisting}     
		
		Το λογότυπο, το οποίο και αυτό καθορίζεται δυναμικά από τον διαχειριστή καθώς και το σημείο που εμφανίζονται κάποια στοιχεία επικοινωνίας:
		
		\begin{lstlisting}[caption=Template: Body part - Search, style=htmlcssjs]		     
			</div><!--//to-bar-->
			<div class="header-main container">
				<h1 class="logo col-md-4 col-sm-4">
					<a href="<?php echo base_url() ?>"><img id="logo" src="<?php echo base_url() . "assets/images/" . $this->settings->site_logo ?>" alt="Logo"></a>
				</h1><!--//logo-->           
				<div class="info col-md-8 col-sm-8">
					<ul class="menu-top navbar-right hidden-xs">
						<li class="divider"><a href="<?php echo base_url() ?>"><?php echo lang('home'); ?></a></li>
						<li class="divider"><a href="<?php echo base_url() ?>contact_us"><?php echo lang('contact'); ?></a></li>
						<?php 
							if (!$this->ion_auth->logged_in()) {
								echo '<li><a href="' . base_url() . 'auth/login">Login</a></li>';
							} else {
								echo '<li><a href="' . base_url() . 'auth/logout">Logout</a></li>';
							}
						?>
					</ul><!--//menu-top-->
					<br />
					<div class="contact pull-right">
						<p class="phone"><i class="fa fa-phone"></i><?php echo $this->contactDetails->phone ?></p> 
						<p class="email"><i class="fa fa-envelope"></i><a href="mailto:<?php echo $this->contactDetails->email ?>"><?php echo $this->contactDetails->email ?></a></p>
					</div><!--//contact-->
				</div><!--//info-->
			</div><!--//header-main-->
		</header><!--//header-->

		<?php  $this->load->view('main_menu'); ?>
			\end{lstlisting}
						
			Το επόμενο κομμάτι είναι αυτό που καθορίζει ποιο θα είναι το αρχείο που θα φορτωθεί για να προβάλλει το περιεχόμενο που ζήτησε ο χρήστης, το οποίο έχει παραχθεί δυναμικά μέσω της επικοινωνίας του Controller με το Model και έπειτα πάλι με το View.
			
			\begin{lstlisting}[caption=Template: dynamic load - View, style=htmlcssjs]
<div class="content container">
	<?php  $this->load->view($template); ?>
</div><!-- /content -->
			\end{lstlisting}
			
			Τα κομμάτια HTML που μένουν στατικά σε συνδυασμό με κάποια δυναμικά μέρη που εμφανίζουν στο ίδιο HTML κομμάτι ένα δυναμικό περιεχόμενο, περικλείουν εκείνο το κομμάτι που κάνει την δυναμική φόρτωση του αρχείου του View που έχει οριστεί απο τον Controller.		
				
			Στο τέλος του αρχείου και αφού εμφανιστούν και τα απαραίτητα υπόλοιπα στατικά μέρη υπάρχει η ενσωμάτωση όλων των απαιτούμενων αρχείων JavaScript που απαιτούνται για την ορθή απεικόνιση και δημιουργία του HTML κομματιού και αποτελούν αναπόσπαστο κομμάτι της εμπειρίας και της περιήγησης του χρήστη στον ιστότοπο.
			
			\begin{lstlisting}[caption=Template: js load - View, style=htmlcssjs]
	<!-- Javascript -->          
	<script type="text/javascript" src="<?php echo base_url();?>assets/plugins/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/plugins/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/plugins/bootstrap/js/bootstrap.min.js"></script> 
				. . . . . . . 
	<script type="text/javascript" src="<?php echo base_url();?>assets/js/main.js"></script>   
</body>
</html>
				\end{lstlisting}
				
	\section{Frontend}
		\subsection{Λειτουργίες}
		\begin{itemize}
			\item Προβολή των πληροφοριών όπως ανακοινώσεις, άρθρα, κριτικές, διαφημίσεις κ.α. με χρήση δυναμικών κειμένων καθοριζόμενων από τον διαχειριστή του ιστότοπου καθώς και την χρήση δυναμικών εναλλασσόμενων εικόνων (slide), καρτελών (tab) και μενού.
			\item Δυνατότητα αναζήτησης περιεχόμενου σε ολόκληρη την εφαρμογή γράφοντας αυτό που ψάχνουμε σε ειδικό πλαίσιο κειμένου.
			\item Δυνατότητα εγγραφής σε ειδική mailing list, μέσω της οποίας ο ενδιαφερόμενος θα μπορεί να λαμβάνει ειδικές ειδοποιήσεις και ανακοινώσεις.
			\item Σελίδα επικοινωνίας φτιαγμένη σύμφωνα με τις σύγχρονες ανάγκες των διαδικτυακών εφαρμογών.
			\item Διασύνδεση εφαρμογής με εφαρμογές κοινωνικής δικτύωσης όπως το facebook, twitter, google + κ.α.
			\item Ειδικές σελίδες οι οποίες καθορίζουν τους όρους \& προϋποθέσεις χρήσης της εφαρμογής μας, την πολίτικη απορρήτου άλλα και άλλες πληροφορίες και είναι μόνιμα τοποθετημένες στο υποσέλιδο (footer) της εφαρμογής μας.
			\item Δυνατότητα μεταφόρτωσης (download) ειδικού διαφημιστικού εντύπου που έχει ορίσει ο διαχειριστής.
			\item Δυνατότητα εναλλαγής σελίδων και επιστροφής σε αυτές, με την χρήση δυναμικών menu.
		\end{itemize}

	\clearpage	
	
	\subsection{Ενδεικτικά Σενάρια Χρήσης}
			\begin{usecase}
				\addtitle{Σενάριο χρήσης 1}{Αποστολή μηνύματος μεσώ της σελίδας επικοινωνίας} 
				
				%Scope: the system under design
				\addfield{Scope:}{Σελίδα επικοινωνίας}
				
				%Primary Actor: Calls on the system to deliver its services.
				\addfield{Primary Actor:}{χρήστης ή επισκέπτης}
				
				%Stakeholders and Interests: Who cares about this use case and what do they want?
				\additemizedfield{Ενδιαφερόμενα μέρη:}
				{
					\item Διαχειριστής συστήματος
				}
				
				%Preconditions: What must be true on start and worth telling the reader?
				\addfield{Προϋποθέσεις:}{ O χρήστης πηγαίνει στην επιθυμητή σελίδα χρησιμοποιώντας έναν από τους συνδέσμους που υπάρχουν στην εφαρμογή. Η εφαρμογή ανταποκρίνεται και η σελίδα επικοινωνίας φορτώνει με δεδομένα.}
				%when multiple
				%\additemizedfield{Preconditions:}{} 
				
				%Postconditions: What must be true on successful completion and worth telling the reader
				%\addfield{Postconditions:}{}
				%when multiple
				%\additemizedfield{Preconditions:}{}
				
				%Main Success Scenario: A typical, unconditional happy path scenario of success.
				\addscenario{Ιδανικό σενάριο:}
				{
				
					\item user/επισκέπτης: Συμπληρώνει τα πλαίσια κειμένου με τις απαραίτητες πληροφορίες που πρέπει
					\item user/επισκέπτης: Φροντίζει να συμπληρώσει σωστά και το ειδικό κείμενο αποφυγής ανεπιθύμητων (spam) μηνυμάτων reCaptcha που υπάρχει στο κάτω μέρος τις οθόνης.
					\item user/επισκέπτης: Πατάει το κουμπί αποστολής
					\item system: Η εφαρμογή είναι υπεύθυνη να ελέγξει το reCaptcha και εφόσον είναι σωστό να συνεχίσει
					\item system: Αποθηκεύει το μήνυμα στην βάση δεδομένων
					\item frontend: Εμφανίζει ειδική ένδειξη (notification) στον χρήστη/επισκέπτη
					\item backend: Εμφανίζει ειδική ένδειξη (notification) στον διαχειριστή της σελίδας μέσα στη σελίδα διαχείρισης
				}
				
				%Extensions: Alternate scenarios of success or failure.
				\addscenario{Εναλλακτικά Σενάρια:}
				{
					\item[2.a] user/επισκέπτη: Δίνει λανθασμένο reCaptcha code:
						\begin{enumerate}
							\item [2.] frontend: Επιστρέφει στην σελίδα επικοινωνίας
							\item [3.] frontend: Εμφανίζει σφάλμα λάθους
						\end{enumerate}
				}
			\end{usecase}
			
			\clearpage		
			
			\begin{usecase}
				\addtitle{Σενάριο χρήσης 2}{Ανάγνωση Ανακοινώσεων \& τελευταίων νέων} 
				
				%Scope: the system under design
				\addfield{Scope:}{Σελίδα ανακοινώσεων}
				
				%Primary Actor: Calls on the system to deliver its services.
				\addfield{Primary Actor:}{χρήστης ή επισκέπτης}
				
				%Stakeholders and Interests: Who cares about this use case and what do they want?
				\additemizedfield{Ενδιαφερόμενα μέρη:}
				{
					\item χρήστης ή επισκέπτης
				}
				
				%Preconditions: What must be true on start and worth telling the reader?
				\addfield{Προϋποθέσεις:}{ ξεκινώντας από την αρχική σελίδα της εφαρμογής μας πηγαίνει να διαβάσει τις ανακοινώσεις είτε χρησιμοποιώντας το ειδικό link (υπερσύνδεσμος) που υπάρχει στο header της αρχικής σελίδας μας είτε πατώντας σε κάποιο από τα πιο πρόσφατα νέα τα οποία εμφανίζονται στο κυρίως περιεχόμενο της αρχικής μας σελίδας. }
				%when multiple
				%\additemizedfield{Preconditions:}{} 
				
				%Postconditions: What must be true on successful completion and worth telling the reader
				%\addfield{Postconditions:}{}
				%when multiple
				%\additemizedfield{Preconditions:}{}
				
				%Main Success Scenario: A typical, unconditional happy path scenario of success.
				\addscenario{Ιδανικό σενάριο:}
				{
				
					\item Χρήστης/Επισκέπτης: Κάνει περιήγηση στην κύρια σελίδα των ανακοινώσεων
					\item Χρήστης/Επισκέπτης: Επιλέγει μια ανακοίνωση που τον ενδιαφέρει
					\item Χρήστης/Επισκέπτης: Πατάει στον τίτλο της
					\item System: Ανακτά το περιεχόμενο της ανακοίνωση από την βάση δεδομένων
					\item Frontend: Εμφανίζει το κυρίως περιεχόμενο της ανακοίνωσης
					\item Χρήστης/Επισκέπτης: Διαβάζει το περιεχόμενο
				}
			\end{usecase}		
		
	\section{Members area}
		\subsection{Λειτουργίες}
		\begin{itemize}
			\item Δυνατότητα αποστολής προσωπικών μηνυμάτων.
			\item Δυνατότητα προβολής των μαθημάτων στα οποία είναι εγγεγραμμένος ένας χρήστης.
			\item Δυνατότητα σύνδεσης με όνομα χρήστη (username) και συνθηματικό (password).
			\item Δυνατότητα ανάγνωσης συγκεκριμένων άρθρων σχετικά με ένα μάθημα όπως επίσης και κατέβασμα (download) αρχείων που υπάρχουν στο μάθημα αυτό.
			\item Κατηγοριοποίηση χρηστών ανάλογα των βαθμό τους (καθηγητής  - μαθητής - γονέας).
			\item Προβολή του αντίστοιχου καθηγητή ανά μάθημα, προβολή συγκεκριμένων στοιχείων για αυτόν όπως τηλέφωνα, email άλλα και δυνατότητα αποστολής προσωπικού μηνύματος σε αυτόν.
		\end{itemize}
	
	\clearpage
	\subsection{Ενδεικτικά Σενάρια Χρήσης}
				\begin{usecase}
				\addtitle{Σενάριο χρήσης 1}{Σύνδεση Χρήστη στην Εφαρμογή} 
				
				%Scope: the system under design
				\addfield{Scope:}{Σελίδα Σύνδεσης (Login Page}
				
				%Primary Actor: Calls on the system to deliver its services.
				\addfield{Primary Actor:}{User ή Επισκέπτης}
				
				%Stakeholders and Interests: Who cares about this use case and what do they want?
				\additemizedfield{Ενδιαφερόμενα μέρη:}
				{
					\item Διαχειριστής συστήματος
				}
				
				%Preconditions: What must be true on start and worth telling the reader?
				\addfield{Προϋποθέσεις:}{ Ο επισκέπτης πρέπει να καταλήξει στην σελίδα σύνδεσης (Login Page) μέσω του ειδικού συνδέσμου που υπάρχει στην αρχή της αρχικής σελίδας της εφαρμογής μας. Η εφαρμογή μας πρέπει να ανταποκριθεί επιτυχημένα και να φορτώσει (load) την σελίδα αυτή.}
				%when multiple
				%\additemizedfield{Preconditions:}{} 
				
				%Postconditions: What must be true on successful completion and worth telling the reader
				%\addfield{Postconditions:}{}
				%when multiple
				%\additemizedfield{Preconditions:}{}
				
				%Main Success Scenario: A typical, unconditional happy path scenario of success.
				\addscenario{Ιδανικό σενάριο:}
				{
				
					\item User/Επισκέπτης: Συμπληρώνει τα πεδία της σελίδας με τις απαραίτητες πληροφορίες.
					\item User/Επισκέπτης: Πατάει το κουμπί αποστολής.
					\item System: Η εφαρμογή μας είναι υπεύθυνη να ελέγξει αν υπάρχουν οι πληροφορίες  που έδωσε ο επισκέπτης.
					\item System: Αν η σύνδεση είναι επιτυχής το σύστημα ενημερώνεται ότι υπάρχει χρήστης συνδεδεμένος.
					\item Frontend: Εμφανίζει ειδική ένδειξη (notification) στον user/επισκέπτη.
					\item Backend: Εμφανίζει ειδική ένδειξη (notification) στον administrator της σελίδας.
				}
				
				%Extensions: Alternate scenarios of success or failure.
				\addscenario{Εναλλακτικά Σενάρια:}
				{
					\item[2.a] User/Επισκέπτη: Δίνει λανθασμένα στοιχεία σύνδεσης:
						\begin{enumerate}
							\item [2.] Frontend: Επιστρέφει στην σελίδα Σύνδεσης.
							\item [3.] Frontend: Εμφανίζει σφάλμα λάθους.
						\end{enumerate}
				}
			\end{usecase}
			
			\clearpage
			
						\begin{usecase}
				\addtitle{Σενάριο χρήσης 2}{Ανάγνωση άρθρου μαθήματος από την ειδική περιοχή χρηστών της εφαρμογής} 
				
				%Scope: the system under design
				\addfield{Scope:}{Σελίδα μαθήματος - άρθρα}
				
				%Primary Actor: Calls on the system to deliver its services.
				\addfield{Primary Actor:}{Χρήστης (User)}
				
				%Stakeholders and Interests: Who cares about this use case and what do they want?
				\additemizedfield{Ενδιαφερόμενα μέρη και ενδιαφέροντα:}
				{
					\item Χρήστης (user)
				}
				
				%Preconditions: What must be true on start and worth telling the reader?
				\addfield{Προϋποθέσεις:}{ Ο Χρήστης πρέπει να είναι συνδεδεμένος στην εφαρμογή. Πρέπει να  μεταβεί στην περιοχή μελών, όπως επίσης και στο μάθημα που επιθυμεί μέσω των συνδέσμων της εφαρμογής.}
				%when multiple
				%\additemizedfield{Preconditions:}{} 
				
				%Postconditions: What must be true on successful completion and worth telling the reader
				%\addfield{Postconditions:}{}
				%when multiple
				%\additemizedfield{Preconditions:}{}
				
				%Main Success Scenario: A typical, unconditional happy path scenario of success.
				\addscenario{Ιδανικό σενάριο:}
				{
				
					\item User: Κάνει περιήγηση στα μαθήματα που είναι γραμμένος.
					\item User: Επιλέγει ένα από τα μαθήματα που τον ενδιαφέρουν.
					\item User: Πατάει σε ένα από τα διαθέσιμα άρθρα του μαθήματος.
					\item System: Ανακτά το περιεχόμενο του άρθρου από την βάση δεδομένων.
					\item Frontend: Εμφανίζει το κυρίως περιεχόμενο του άρθρου.
					\item User: Διαβάζει το περιεχόμενο.
				}
			\end{usecase}
			
			\clearpage
	
	\section{Χώρος διαχείρισης}
	Ο χώρος διαχείρισης (administration area) είναι μια ειδική περιοχή της εφαρμογής μας στην οποία έχουν πρόσβασή μόνο οι λογαριασμοί χρήστη οι οποίοι έχουν τα δικαιώματα του διαχειριστή (administrator). Αυτός ο ειδικός χώρος προσφέρει διάφορες λειτουργίες που έχουμε αναπτύξει έτσι ώστε ο διαχειριστής να μπορεί να έχει τον έλεγχο του περιεχόμενου που υπάρχει στην εφαρμογή, των χρηστών, όπως επίσης και να μπορεί να αλλάζει μερικώς την εμφάνιση της.
	
	\subsection{Λειτουργίες}
		\begin{itemize} 
			\item Δυνατότητα διαχείρισης των αρθρώνω που υπάρχουν στην εφαρμογή (άρθρων σελίδας και μαθημάτων). Μέσα στις δυνατότητες αυτές είναι:	
				\begin{enumerate}
					\item Προσθήκη νέου άρθρου (σε μια από τις 2 κατηγορίες) βάζοντας τα εξής πεδία : τίτλο, περιεχόμενο, ημερομηνία, κατηγορία.
					\item Επεξεργασία των ήδη υπάρχων άρθρων .
					\item Διαγραφή ενός άρθρου.
				\end{enumerate}

			\item Δυνατότητα διαχείρισης των χρηστών που υπάρχουν στην εφαρμογή
				\begin{enumerate}
					\item Προσθήκη χρήστη βάζοντας τα εξής πεδία : Username, email, Active, First Name, Last Name, Phone, Group. Επισης καταχωρείται αυτόματα η ημερομηνία που τον δημιουργούμε.
					\item Επεξεργασία
					\item Διαγραφή
				\end{enumerate}

			\item Δυνατότητα διαχείρισης των διάφορων User Groups που υπάρχουν
				\begin{enumerate}
					\item Προσθήκη User Group βάζοντας τα πεδία : Όνομα, Περιγραφή
					\item Επεξεργασία
					\item Διαγραφή
				\end{enumerate}

			\item Δυνατότητα διαχείρισης των διάφορων τμημάτων που υπάρχουν.
				\begin{enumerate}
					\item Προσθήκη Classes βάζοντας τα πεδία : Όνομα, Περιγραφή
					\item Επεξεργασία
					\item Διαγραφή
				\end{enumerate}
			\item Δυνατότητα διαχείρισης των μαθημάτων.
				\begin{enumerate}
					\item Προσθήκη Courses βάζοντας τα πεδία : Όνομα, Περιγραφή
					\item Επεξεργασία
					\item Διαγραφή
				\end{enumerate}
			\item Δυνατότητα διαχείρισης των κατηγόριων που υπάρχουν για τις διάφορες αναρτήσεις της εφαρμογής μας.
				\begin{enumerate}
					\item Προσθήκη κατηγορίας βάζοντας τα πεδία : Όνομα, Περιγραφή
					\item Επεξεργασία
					\item Διαγραφή
				\end{enumerate}
			\item Διαχείριση των διάφορων επισυνάψεων που υπάρχουν σε διάφορα σημεία της σελίδας μας. Έκτος από τα προηγούμενα εδώ επίσης υπάρχει η δυνατότητα να δεις την επισύναψη live στο υπολογιστή και να την κατεβάσεις.
			\item Δυνατότητα επεξεργασίας των comments που μπορεί να υπάρχουν σε διάφορα άρθρα της εφαρμογής μας.
			\item Δυνατότητα επεξεργασίας της περιοχής (Τestimonials) της αρχικής σελίδας μας που χρησιμοποιείται σαν "διαφήμιση" για την εφαρμογή μας. Μπορούμε να προσθέσουμε, επεξεργαστούμε κ διαγράψουμε διάφορες κρητικές που θέλουμε να φαίνονται στην εφαρμογή μας.
			\item Δυνατότητα επεξεργασίας του banner που υπάρχει στην αρχική σελίδα έτσι ώστε να μπορέσουμε να βάλουμε διαφορετικά μηνύματα, τίτλο, link όπως επίσης και position.
			\item Δυνατότητα επεξεργασίας του slideshow που υπάρχει στην αρχική σελίδα με διάφορες φωτογραφίες, τίτλους, επεξήγηση όπως επίσης και σύνδεσμο αν το επιθυμούμε.
			\item Δυνατότητα επεξεργασίας της mailling list που υπάρχει στην εφαρμογή μας.
			\item Ειδική περιοχή στην οποία τα μαθήματα φαίνονται σε κατηγορίες και έτσι έχουμε καλύτερη εικόνα για το τι περιεχόμενο υπάρχει στο καθένα
			\item Περιοχή ρυθμίσεων οποί μπορούμε να αλλάξουμε τις πληροφορίες του footer της σελίδας μας (contact us) όπως επίσης και το γενικό όνομα της σελίδας μας.
		\end{itemize}

	Επίσης υπάρχουν οι εξής δυνατότητες:
	\begin{itemize}
		\item Δυνατότητα να διαβάσει ο διαχειριστής τα μηνύματα που έχουν στείλει διάφοροι χρήστες και επισκέπτες στην εφαρμογή μας μεσώ της φόρμας contact. (δεν λειτουργεί)
		\item Δυνατότητα να δει μεσώ των social media την επισκεψιμότητα προς την εφαρμογή μας.
		\item Δυνατότητα να δει τα χαρακτηριστικά του.
		\item Ρυθμίσεις
		\item Ειδική διαμορφωμένη αρχική σελίδα διαχείρισης οποί έχει γρήγορη πρόσβαση σε συνηθισμένες εργασίες. (create article, user , course, classroom).
	\end{itemize}

	Επίσης όλοι οι πινάκες της εφαρμογής μας στο σημείο αυτό δίνουν την δυνατότητα να κάνουμε export την σελίδα σε .xls, να την τυπώσουμε χρησιμοποιώντας την default λειτουργιά του broswer, να κάνουμε search στα περιεχόμενα του εκάστοτε πινάκα όπως επίσης και να εμφανίσουμε συγκεκριμένο αριθμό πληροφοριών, να κάνουμε refresh, κλπ

	\clearpage
	\subsection{Ενδεικτικά Σενάρια Χρήσης}
				\begin{usecase}
				\addtitle{Σενάριο χρήσης 1}{Δημιουργία καινούριου Χρήστη (User)} 
				
				%Scope: the system under design
				\addfield{Scope:}{Σελίδα Διαχείρισης}
				
				%Primary Actor: Calls on the system to deliver its services.
				\addfield{Primary Actor:}{Διαχειριστής}
				
				%Stakeholders and Interests: Who cares about this use case and what do they want?
				\additemizedfield{Ενδιαφερόμενα μέρη:}
				{
					\item Διαχειριστής συστήματος
				}
				
				%Preconditions: What must be true on start and worth telling the reader?
				\addfield{Προϋποθέσεις:}{ Ο χρήστης πρέπει να είναι συνδεδεμένος και να έχει δικαιώματα διαχειριστή. Πρέπει να έχει μεταβεί με επιτυχία στην ειδική περιοχή διαχείρισης της εφαρμογής.}
				%when multiple
				%\additemizedfield{Preconditions:}{} 
				
				%Postconditions: What must be true on successful completion and worth telling the reader
				%\addfield{Postconditions:}{}
				%when multiple
				%\additemizedfield{Preconditions:}{}
				
				%Main Success Scenario: A typical, unconditional happy path scenario of success.
				\addscenario{Ιδανικό σενάριο:}
				{
				
					\item Διαχειριστής: Επιλέγει την λειτουργία δημιουργίας χρήστη χρησιμοποιώντας το πλάγιο μενού ή τον σύνδεσμο στην μέση της αρχικής σελίδας στην περιοχή διαχείρισης.
					\item Διαχειριστής: Εισάγει τις απαραίτητες πληροφορίες που ζητάει η σελίδα.
					\item Διαχειριστής: Πατάει το κουμπί αποθήκευσης.
					\item System: Η εφαρμογή είναι υπεύθυνη να ελέγξει αν υπάρχουν οι πληροφορίες  που έδωσε ο διαχειριστής όπως επίσης και να ελέγξει αν έχει δώσει όλες τις απαραίτητες πληροφορίες.
					\item System: Αν δεν υπάρχουν σφάλματα τότε η αποθήκευση γίνεται με επιτυχία.
					\item Frontend: Εμφανίζει ειδική ένδειξη (notification) στον διαχειριστή.
				}
				
				%Extensions: Alternate scenarios of success or failure.
				\addscenario{Εναλλακτικά Σενάρια:}
				{
					\item[2.a] Διαχειριστής: Δίνει λανθασμένα στοιχεία χρήστη ή ο χρήστης υπάρχει ήδη:
						\begin{enumerate}
							\item [2.] Frontend: Επιστρέφει στην σελίδα δημιουργίας χρήστη.
							\item [3.] Frontend: Εμφανίζει το κατάλληλο σφάλμα λάθους.
						\end{enumerate}
				}
			\end{usecase}
			
			\clearpage
			
			\begin{usecase}
				\addtitle{Σενάριο χρήσης 2}{Αλλαγή πληροφοριών εναλλάξιμων εικόνων (slideshow)} 
				
				%Scope: the system under design
				\addfield{Scope:}{Σελίδα Διαχείρισης}
				
				%Primary Actor: Calls on the system to deliver its services.
				\addfield{Primary Actor:}{Διαχειριστής}
				
				%Stakeholders and Interests: Who cares about this use case and what do they want?
				\additemizedfield{Ενδιαφερόμενα μέρη:}
				{
					\item Διαχειριστής συστήματος
				}
				
				%Preconditions: What must be true on start and worth telling the reader?
				\addfield{Προϋποθέσεις:}{ Ο χρήστης πρέπει να είναι συνδεδεμένος και να έχει δικαιώματα διαχειριστή. Πρέπει να έχει μεταβεί με επιτυχία στην ειδική περιοχή διαχείρισης της εφαρμογής.}
				%when multiple
				%\additemizedfield{Preconditions:}{} 
				
				%Postconditions: What must be true on successful completion and worth telling the reader
				%\addfield{Postconditions:}{}
				%when multiple
				%\additemizedfield{Preconditions:}{}
				
				%Main Success Scenario: A typical, unconditional happy path scenario of success.
				\addscenario{Ιδανικό σενάριο:}
				{
				
					\item Διαχειριστής: Επιλέγει την λειτουργία διαχείρισης slideshow χρησιμοποιώντας τον ειδικό σύνδεσμο στο πλάγιο μενού.
					\item Διαχειριστής: Επιλέγει την περιοχή που θέλει να τροποποιήσει και πατάει το κουμπί \textit{Edit}.
					\item Διαχειριστής: Τροποποιεί όσες πληροφορίες επιθυμεί.
					\item Διαχειριστής: Πατάει το κουμπί αποθήκευσης.
					\item System: Η εφαρμογή μας είναι υπεύθυνη να αποθηκεύσει τις πληροφορίες που τροποποίησε ο διαχειριστής.
					\item System: Αν δεν υπάρχουν σφάλματα τότε η αποθήκευση γίνεται με επιτυχία.
					\item Frontend: Εμφανίζει ειδική ένδειξη (notification) στον διαχειριστή.
				}
			\end{usecase}
			
			\clearpage
